@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {
  :root {
    --color-base: theme('colors.white');
    --color-dark: theme('colors.white');
    --color-text-base: theme('colors.black');
    --color-off-base: theme('colors.gray.50');
    --color-text-muted: theme('colors.gray.600');
    --color-text-muted-hover: theme('colors.gray.500');
    --color-border-base: theme('colors.white');
    --color-primary: theme('colors.black');
    --color-secondary:theme('colors.blue.200');
    --color-shadow-base: theme('colors.gray.200');

    /* 一些常用的tailwind里没有的主题颜色 */
    --color-dark-base: #141414;
  }

  .light {
    --color-dark: theme('colors.white');
    --color-border-base: theme('colors.gray.200');
  }

  .dark {
    --color-base: var(--color-dark-base);
    --color-text-base: theme('colors.gray.100');
    --color-off-base: theme('colors.gray.800');
    --color-text-muted:theme('colors.gray.300');
    --color-text-muted-hover: theme('colors.gray.200');
    --color-primary: theme('colors.blue.500');
    --color-secondary: theme('colors.blue.200');
  }

  .sky {
    --color-base: theme('colors.sky.100');
    --color-dark: theme('colors.sky.100');
    --color-text-base: theme('colors.gray.600');
    --color-off-base: theme('colors.sky.200');
    --color-text-muted:theme('colors.gray.600');
    --color-text-muted-hover: theme('colors.sky.300');
    --color-primary: theme('colors.amber.700');
    --color-secondary: theme('colors.amber.400');
    --color-shadow-base: theme('colors.white');
  }
}
